import React, { useState,memo } from 'react'
import {connect} from 'react-redux'
import * as actionTypes from './store/action'
import './assets/iconfont/iconfont.css'
import {Tabbar,TabbarItem} from './components'
import { menuRoute } from './router'
import { Routes, Route, useLocation } from 'react-router-dom'

function App(props) {
  let {index}=props
  let{setIndexDispatch:changeIndex}=props
  // console.log(index,setIndexDispatch);
  let {pathname}=useLocation()
  index=pathname
 
  return (
    <div className="App">
      <Routes>
        {menuRoute.map(item => <Route path={item.path} key={item.id} element={<item.element />}></Route>)}
      </Routes>
      
      <Tabbar>
      {menuRoute.map((item)=>
        <TabbarItem  
          itemKey={item.path} 
          key={item.path}
          activeKey={index} 
          lightHight={changeIndex} 
          activeicon={item.activeicon} 
          icon={item.icon} 
          title={item.title}/>)
        }
      </Tabbar>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
      index: state.app.index
  }
}
const mapStateToDisPatch = (dispatch) => {
  return {
      setIndexDispatch(index) {
          dispatch(actionTypes.setIndex(index))
      }
  }
}

export default connect(mapStateToProps,mapStateToDisPatch)(memo(App))
